<template>
  <div class="Jurisdiction">
    <div class="main">
      <Tree :data="data2" show-checkbox @on-check-change="selectItem"></Tree>
      <div style="width:100%px;text-align:center;padding: 20px 0px;margin-top:20px">
        <Button style="margin-right:10px;width:75px;height:35px;" type="primary" @click="save">
          <Icon type="ios-checkmark" style="margin-right: 5px" />保存
        </Button>
        <Button @click="back" style="width:75px;height:35px;">
          <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
        </Button>
      </div>
    </div>
  </div>
</template>
<script>
import api from "@/api/commonApi";
import { Tree } from "view-design";
export default {
  components: {
    Tree
  },
  data() {
    return {
      data2: [],
      selectData: [],
      userId: ''
    };
  },
  mounted() {
  
  },
  methods: {
    //账号权限配置-用户权限管理-全部菜单
    deploy(id){
      this.userId = id;
      this.$axios
        .post(api.findUserMenu, {
          userId:this.userId
        })
        .then(res => {
          if (res.data.code) {
            let ret = res.data.object;
            let data = [];
            //   循环
            ret.forEach((item, index) => {
              item.top.title = item.top.menuName;
              item.top.expand = Boolean(item.top.iopen);
              if (Boolean(item.top.iopen)) {
                if (item.second && item.second.length == 0) {
                  item.top.checked = true;
                }
              }
              let a = item.top;
              let children = [];
              // 循环取到 二级菜单
              if(item.second){
                item.second.forEach((i, s) => {
                  i.second.title = i.second.menuName;
                  i.second.expand = Boolean(i.second.iopen);
                  if (Boolean(i.second.iopen)) {
                    if (i.last.length == 0) {
                      i.second.checked = Boolean(i.second.iopen);
                    }
                  }
                  let child = [];
                  //   取到三级菜单
                  if(i.last){
                    i.last.forEach((s, c) => {
                      s.title = s.menuName;
                      s.expand = Boolean(s.iopen);
                      s.checked = Boolean(s.iopen);
                      child.push(s);
                      if (Boolean(s.iopen)) {
                      }
                    });
                  }
                  i.second.children = child;
                  children.push(i.second);
                  a.children = children;
                });
              } else {
                  item.top.checked = item.top.expand
              }
              data.push(a);
            });
            this.data2 = data;
          } else {
            this.$Message.info("查询用户权限失败");
          }
        });
    },
    // 获取用户菜单
    selectItem(item) {
      this.selectData = item;
    },
    // 修改用户权限
    save() {
      let menuIds = [];
      this.selectData.forEach(item => {
        menuIds.push(item.id);
      });
      // 主菜单
      this.data2.forEach(item => {
        if (!Boolean(item.children) && item.checked) {
          menuIds.push(item.id);
          return "";
        }
        // 二级菜单
        if(item.children) {
          item.children.forEach(two => {
            if (two.children) {
              // 功能
              two.children.forEach(free => {
                if (free.checked) {
                  menuIds.push(free.id);
                  // 二级菜单id
                  menuIds.push(two.id);
                  // 主菜单id
                  menuIds.push(item.id);
                }
              });
            }
          });
        }
        
      });

      let a = new Set([...menuIds]);
      if (a.size === 0) {
        this.$Message.error("请至少选择一个功能");
      } else {
        this.$axios
          .post(api.saveUserMenu, {
            userId: this.userId,
            menuIds: a
          })
          .then(res => {
            if (res.data.code) {
              this.$Message.info("修改成功");
              this.$emit('showJurisdictionModal');     //关闭弹窗
            } else {
              this.$Message.info(res.data.message);
            }
          })
      }
    },
    back() {
      this.$emit('showJurisdictionModal');
    }
  }
};
</script>
<style lang="less" scoped>
.Jurisdiction {
    padding: 10px -16px;
    margin-top: -6px;
    width: 100%;
    // overflow-y: scroll;
    background: #ffffff;
    box-sizing: border-box;
    .main{
		width: 98%;
		display: flex;
		flex-direction: column;
		margin: 10px auto;
		border-radius: 5px;
		margin-bottom: 20px;
		padding: 0 50px;
		.title {
			font-size: 20px;
			padding-left: 15px;
			margin-bottom: 20px;
			color: #333;
			height: 40px;
			line-height: 40px;
			background: #ebedf8;         
		}
    }
}
</style>
